<template>
  <div class="bx1">
    <!-- 头部tab -->
    <!-- <div class="top_tab">
      <div class="left" @click="back()">
        <img  src="../assets/order_center/shangs.png">
      </div>
      <span>修改安全密码</span>
      <div class="right">
      </div>
    </div> -->
    <div class="box">
			<div class="info">
				<span>已绑定手机：</span>
				<span class="phone">{{phone.replace(/(\d{3})(\d{4})(\d{4})/,"$1****$3")}}</span> 
			</div>
		</div>
		<yd-cell-group>
			<yd-cell-item>
				<input type="text" slot="right" v-model="dxing" placeholder="请输入短信验证码">
				<yd-sendcode slot="right" 
											v-model="start1" 
											@click.native="sendCode1" 
											type="warning"
				></yd-sendcode> 
			</yd-cell-item>
    </yd-cell-group>
		<yd-cell-group>
			<yd-cell-item>
				<input type="password" maxlength="6" slot="right" v-model="salepassword" placeholder="请输新密码">
			</yd-cell-item>
    </yd-cell-group>
		<yd-cell-group>
			<yd-cell-item>
				<input type="password" maxlength="6"  slot="right" v-model="oksalepassword" placeholder="请确认新密码">
			</yd-cell-item>
    </yd-cell-group>
		<div class="btn">
			<button class="next"  @click="Oclick()">确定</button>
		</div>
	</div>
</template>

<script>
import Vue from 'vue';
import {CellGroup, CellItem} from 'vue-ydui/dist/lib.rem/cell';
Vue.component(CellGroup.name, CellGroup);
Vue.component(CellItem.name, CellItem);

import {SendCode} from 'vue-ydui/dist/lib.rem/sendcode';
Vue.component(SendCode.name, SendCode);
export default {
  name: 'ChangePassword',
  data () {
    return {
		 shou: false,
		 son1:"",
		 son2:"", 
		 son3:"", 
		 son4:"", 
		 son5:"",
		 son6:"",
		 start1: false,
     index:0,
		 isshow:false,
		 phone:'',
		 codes:'',
		 dxing:'',
		 salepassword:'',
		 oksalepassword:''
    }
  },
  methods:{
		
    vanish: function() {
      this.shou = false;
    },
    back: function() {
      this.$router.go(-1);
		},
		 //获取用户资料
    detail:function(){
      let self = this;
      let url = "/api/login/detail";
			self.httpPost(url,{user_id:this.myid,token:this.token},function(res) {
				if (res.code === 200) {
          self.phone=res.data.phone; 
				} 
      })
    },
		sendCode1() {
			this.$dialog.loading.open('发送中...');
			let self = this;
      let url = "/api/login/send";
			self.httpPost(url,{phone:self.phone,type:6},function(res) {
				if (res.code === 200) {
					self.codes = res.data;
					self.start1 = true;
					self.$dialog.loading.close();
					self.$dialog.toast({
							mes: '已发送',
							icon: 'success',
							timeout: 1500
					});
				} 
      })
		 
		},
	//	下一步
		Oclick: function() {
			let self = this;
			var pattern = /^[0-9]+(.[0-9]{0,3})?$/;
			if(self.codes !=self.dxing){
				self.$dialog.toast({mes:"请输入正确的验证码"});
			}else if(!self.codes){
				self.$dialog.toast({mes:"请输入验证码"});
			}else if(self.codes == self.dxing){
				if(!pattern.test(self.salepassword)){
					self.$dialog.toast({mes:"密码只能是6位数字"});
					return
				}

				if(!self.salepassword){
					self.$dialog.toast({mes:"输入新密码"});
					return
				}
				if(!self.oksalepassword){
					self.$dialog.toast({mes:"确认新密码"});
					return
				}
				if(self.oksalepassword!=self.salepassword){
					self.$dialog.toast({mes:"两次密码不一致"});
					return
				}
				let url = "/api/login/safe";
				self.httpPost(url,{token:self.token,user_id:self.myid,phone:self.phone,code:self.dxing,salepassword:self.salepassword,type:6},function(res) {
					if (res.code === 200) {
						self.$dialog.toast({mes:res.msg});
						setTimeout(() => {
    			 	 self.$router.go(-1);
						}, 1000);
					}else{
						alert(res.msg)
					}
				})
				
			}
    },
	},
	created(){
		document.title = "设置安全密码";
    this.token = localStorage.getItem('mytoken');
		this.myid = localStorage.getItem('myid');
		this.detail()
	}
}
</script>


<style scoped>
.top_tab{
  width:100%;
  padding:.2rem .3rem;
  background: #FFF;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: .01rem .01rem .06rem #ddd;
  margin-bottom: .03rem;
}
.top_tab span{
  color:#333;
  font-size: .36rem;
	margin-left: .56rem;
}
.top_tab .right{
	width: 1rem;
	display: flex;
	justify-content: space-between;
}
.top_tab  img{
  width:.43rem;
}

.box{
	width:100%;
	height:1rem;
	background: #FFF;
	display: flex;
	padding: 0 .3rem;
	align-items: center;
}
.box .info{
	width:100%;
	height:100%;
	display: flex;
	align-items: center;
	/* border-bottom: 1px solid #eee; */
}
.box .info span{
	font-size: .28rem;
	color:#333;
	vertical-align: middle;
}
.box .info .phone{
	font-size: .28rem;
	color:#e63f3f;
	margin-left: .1rem;
}
.btn{
	width:100%;
	display: flex;
	justify-content: center;
	margin-top: .4rem;
}
.btn .next{
	width: 90%;
	height:.90rem;
	background: #e63f3f;
	border: none;
	border-radius: 10px;
	font-size: .32rem;
	color:#FFF;
}
.box span{
	font-size: .28rem;
	color:#333;
	vertical-align: middle;
}

.boxs{
	width:100%;
	height:1rem;
	background: #FFF;
	display: flex;
	padding: .1rem .3rem;
	align-items: center;
	justify-content: space-between;
}
.boxs .info{
	width:100%;
	height:100%;
	display: flex;
	align-items: center;
	border-bottom: 1px solid #eee;
}
.boxs input{
	border:none;
	width:62%;
	height:100%;
	border-bottom: 1px solid #cecece;
}
.boxs button{
	border:none;
	background: #bababa;
	width:35%;
	height:100%;
	border-radius: 5px;
	color:#FFF;
	font-size: .32rem;
}
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { 
	font-size: .28rem;
	color: #999; 
} 
input:-moz-placeholder, textarea:-moz-placeholder { 
	font-size: .28rem;
	color: #999;  
} 
input::-moz-placeholder, textarea::-moz-placeholder { 
	font-size: .28rem;
	color: #999; 
} 
input:-ms-input-placeholder, textarea:-ms-input-placeholder { 
	font-size: .28rem;
	color: #999;  
} 
.meb {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 9999999;
}
.boxt {
  background: white;
  width: 6.04rem;
  height: 4.69rem;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  z-index: 999;
  border-radius: 10px;
  display: flex;
	flex-direction: column;
	align-items: center;
	padding: .57rem .3rem;
}
.boxt span{
	font-size: .32rem;
	color:#333;
}
.boxt .wfies{
	margin-top: .60rem;
}
.boxt .wfies .bar{
	width:.80rem;
	height:.80rem;
  border:1px solid #999;
	border-left:none;
	text-align: center;
	float: left;
}
.boxt .wfies .bar:first-of-type{
  border-left:1px solid #999;
}
.boxt .cate{
	color: #FFF; 
	width:2.16rem;
	height:.80rem;
  line-height: .80rem;
  border-radius:5px; 
  font-size: .28rem;
  text-align: center;
	background: #e53a30;
	border:none;
  margin-top: .62rem;
}
.heit{
  height: 1rem;
}
</style>

<style>
.yd-cell:after {
	height:0!important;
}
.bx1 .yd-cell-box{
	margin-bottom:0!important;
	border-bottom:1px solid #dfdfdf;
}
</style>

